<template>
  <NavBar>
    <template v-slot:left>
      这是左边
    </template>
    <template #default>
      这是默认内容
    </template>
    <template v-slot:right>
      这是右侧
    </template>
    <template v-slot:center>
      这是中间
    </template>
  </NavBar>
  <nav-bar>
    <template #[position]><a href="#">注册</a></template>
  </nav-bar>
  <button v-on:click="position='left'">左边</button>
  <button v-on:click="position='center'">中间</button>
  <button v-on:click="position='right'">右边</button>
</template>

<script>
import NavBar from './NavBar.vue'
export default {
  name: "App",
  components:{
    NavBar
  },
  data(){
    return {
      position:"center"
    }
  }
}
</script>

<style scoped>

</style>